@property --x {
  syntax: '<length>';
  inherits: false;
  initial-value: 1px;
}
@property --y {
  syntax: '<length>';
  inherits: false;
  initial-value: 1px;
}
@property --radius {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 1%;
}

.img-box {
  position: relative;
  width: 665px;
  height: 400px;
  background: url(./gqq.jpeg) no-repeat;
  background-size: contain;
  --x: 330px;
  --y: 200px;
}
.img-box::after {
  --radius: 20%;
  --x: inherit;
  --y: inherit;
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 665px;
  height: 400px;
  z-index: 1;
  background-color: #000;
  transition: --radius 300ms ease-in;
  
  mask: radial-gradient(
    circle at var(--x) var(--y),
    transparent 0%,
    rgba(0,0,0,0.2) var(--radius),
    rgba(0,0,0,1) calc(var(--radius) + 15%),
    #000 100%
  );
  -webkit-mask: radial-gradient(
    circle at var(--x) var(--y),
    transparent 0%,
    rgba(0,0,0,0.2) var(--radius),
    rgba(0,0,0,1) calc(var(--radius) + 15%),
    #000 100%
  );
}
.img-box-big::after {
  --radius: 15%;
}
.img-box-small::after {
  --radius: 5%;
  transition-duration: 100ms;
}


.img-box-test {
  width: 665px;
  height: 400px;
  background: url(./gqq.jpeg) no-repeat;
  background-size: contain;
  mask: radial-gradient(
    circle,
    transparent 0%,
    rgba(0,0,0,0.2) 10%,
    rgba(0,0,0,1) 20%,
    #000 100%
  );
  -webkit-mask: radial-gradient(
    circle,
    #000 0%,
    #000 10%,
    transparent 40%,
    transparent 100%
  );
}